<template>
  <el-dialog
    class="export-map__wrap"
    title="在线制图"
    :visible.sync="dialogVisible"
    fullscreen
    :before-close="handleClose"
  >
    <el-row>
      <el-col class="export-content__form" :span="5">
        <el-form :model="form" :rules="rules" ref="form">
          <el-form-item label="页面设置:" label-width="85px">
            <el-select v-model="form.pageSettings" placeholder="请选择纸张尺寸和布局" @change="changePaper">
              <el-option value="a4_h" label="A4 横向"></el-option>
              <el-option value="a4_v" label="A4 纵向"></el-option>
              <el-option value="a3_h" label="A3 横向"></el-option>
              <el-option value="a3_v" label="A3 纵向"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="分辨率:" label-width="85px">
            <el-select v-model="form.resolution" placeholder="请选择分辨率" @change="changeResolution">
              <el-option value="72" label="72 dpi(快)"></el-option>
              <el-option value="150" label="150 dpi"></el-option>
              <el-option value="200" label="200 dpi"></el-option>
              <el-option value="300" label="300 dpi(慢)"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="比例尺:" label-width="85px">
            <el-select v-model="form.scale" placeholder="请选择比例尺">
              <el-option value="500" label="1 : 500 000"></el-option>
              <el-option value="250" label="1 : 250 000"></el-option>
              <el-option value="100" label="1 : 100 000"></el-option>
              <el-option value="50" label="1 : 50 000"></el-option>
              <el-option value="10" label="1 : 10 000"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="标题:" prop="title" label-width="85px">
            <el-input v-model="form.title" placeholder="请输入标题"></el-input>
          </el-form-item>
          <el-form-item label="副标题:" prop="subtitle" label-width="85px">
            <el-input v-model="form.subtitle" placeholder="请输入副标题"></el-input>
          </el-form-item>
          <el-form-item label="作者:" prop="author" label-width="85px">
            <el-input v-model="form.author" placeholder="请输入作者"></el-input>
          </el-form-item>
          <el-form-item label="版权所有:" prop="author" label-width="85px">
            <el-input v-model="form.copyright" placeholder="请输入版权所有"></el-input>
          </el-form-item>
          <el-form-item label="文件格式:" label-width="85px">
            <el-select v-model="form.fileFormat" placeholder="请选择文件格式">
              <el-option value="pdf" label="PDF"></el-option>
              <el-option value="png" label="PNG"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="操作:" label-width="85px">
            <el-button size="small" @click="handlePreview('form')">预览</el-button>
            <el-button size="small" @click="handleExport('form')">导出</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col class="export-content__canvas" :span="16">
        <div class="canvas__wrap">
          <canvas id="exportCanvas"></canvas>
        </div>
      </el-col>
      <el-col class="export-content__tree" :span="3">
        <el-tree :data="layers" show-checkbox @check-change="handleCheckChange"></el-tree>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
// import { getPointResolution } from 'ol/proj';
import { initCanvas, mapping, setPaper, downloadFile } from "./mapping.js";
import { getPaperWidth } from './paper.js'

export default {
  props: ["isVisible"],
  data () {
    return {
      dialogVisible: this.isVisible,
      form: {
        title: '',
        subtitle: '',
        author: '',
        copyright: '',
        pageSettings: 'a4_h',
        resolution: '',
        scale: '',
        fileFormat: 'png'
      },
      rules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' },
        ],
        subtitle: [
          { required: true, message: '请输入副标题', trigger: 'blur' },
        ],
        author: [
          { required: true, message: '请输入作者', trigger: 'blur' },
        ],
        copyright: [
          { required: true, message: '请输入版权所有', trigger: 'blur' },
        ],
      },
      layers: [{
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            label: '三级 1-1-1'
          }, {
            id: 10,
            label: '三级 1-1-2'
          }]
        }]
      }, {
        id: 2,
        label: '一级 2',
        children: [{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 6,
          label: '二级 2-2'
        }]
      }, {
        id: 3,
        label: '一级 3',
        children: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2'
        }]
      }],
    };
  },
  computed: {
    olMap () {
      return this.$store.state.olMap;
    },
  },
  mounted () {
    this.$nextTick(() => {
      initCanvas("exportCanvas")
      this.calculatePaper();
    })
  },
  methods: {
    handleCheckChange (data, checked, indeterminate) {
      console.log(data, checked, indeterminate);
    },
    handleClose () {
      this.dialogVisible = false;
      this.$emit("handleVisible", false);
    },
    calculatePaper () {
      const paper = this.form.pageSettings;
      const wrapEle = document.querySelector('.canvas__wrap');
      const canvasEle = document.getElementById('exportCanvas');
      const height = wrapEle.offsetHeight - 20;
      const width = getPaperWidth(paper, height);

      if (/h$/.test(paper)) {
        canvasEle.style.height = width + 'px';
        canvasEle.style.width = height + 'px';
        setPaper(height * 2, width * 2);
      } else {
        canvasEle.style.height = height + 'px';
        canvasEle.style.width = width + 'px';
        setPaper(width * 2, height * 2);
      }
    },
    changePaper () {
      this.calculatePaper();
      // if (this.form.title) {
      //   mapping(this.olMap, this.form);
      // }
    },
    changeResolution (value) {
      // this.olMap.getView().setResolution(value);

      console.log('this.olMap.getView().getZoomForResolution(value): ', this.olMap.getView().getZoomForResolution(value));

      console.log('this.olMap.getView().getProjection(): ', this.olMap.getView().getResolution());
      // 72, 11.087, 0.0006464619583794294
      // 150, 10.027, 0.001347828914593707
      // 200, 9.612, 0.0017970585087730545
      // 300, 9.027, 0.002695657829187414

      // const scaleResolution = this.form.scale /
      //   getPointResolution(
      //     this.olMap.getView().getProjection()

      //     value / 25.4,
      //     this.olMap.getView().getCenter()
      //   );
      // console.log('scaleResolution: ', 1 / scaleResolution * value * 39370.1);
    },
    handlePreview (formName) {
      this.validate(formName, () => mapping(this.olMap, this.form));
    },
    handleExport (formName) {
      this.validate(formName, () => downloadFile(this.form.fileFormat));
    },
    validate (formName, callback) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          callback();
        } else {
          return false;
        }
      });
    }
  },
};
</script>

<style lang="scss" scoped>
.export-map__wrap {
  .export-content__form {
    padding-right: 10px;
  }

  .export-content__canvas {
    .canvas__wrap {
      width: 100%;
      height: 80vh;
      // background-color: #528ccc;
      border: 1px solid rgba(0, 0, 0, 0.3);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    canvas {
      width: 80%;
      height: 80%;
      background-color: #528ccc;
    }
  }

  .export-content__tree {
    padding-left: 10px;
  }
}
</style>
